<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>几个小问题</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
    <!--    使用组件 直接写组件名称标签-->
<!--    <student></student>-->
<!--    第二种写 使用组件的方法 但会导致下面的组件不能使用 (在 vue脚手架中不会发生这种情况 )-->
    <student/>
</div>
<script>
    Vue.config.productionTip = false;
    Vue.config.devtools = true;


    // const student = Vue.extend({
    //     //可以配置一个name属性 来 配置组件的名字(开发者工具中 不会被改)
    //     name:'cty',
    //     //注意不要配置el 组件不会对单独的容器使用
    //     data() {
    //         return {
    //             studentName: '张三',
    //             age: 18
    //         }
    //     },
    //     //定义组件的时候要定义使用模板 要用模板字符串 主要模板的最外面要加 div标签
    //     template: `
    //       <div>
    //       <h2>学生名字:{{ studentName }}</h2>
    //       <h2>学生年龄:{{ age }}</h2>
    //       </div>
    //     `
    // });

    //定义组件的简写 底层也会调用 Vue.extend()
    const student = {
        //可以配置一个name属性 来 配置组件的名字(开发者工具中 不会被改)
        name:'cty',
        //注意不要配置el 组件不会对单独的容器使用
        data() {
            return {
                studentName: '张三',
                age: 18
            }
        },
        //定义组件的时候要定义使用模板 要用模板字符串 主要模板的最外面要加 div标签
        template: `
          <div>
          <h2>学生名字:{{ studentName }}</h2>
          <h2>学生年龄:{{ age }}</h2>
          </div>
        `
    };

    //注册组件(局部注册)
    new Vue({
        el: '#root',
        components: {
            //注意点: 在给对象命名时的规则 1.规则 一个单词时 全部小写 或者 首字母大写  2.多个单词时 中间加-连接 并且要加上引号 或者 单词的都字母大写(vue 脚手架时 生效)
            //组件起名字时 要尽量和html中的标签名字 区分开
            student: student
        }
    });

</script>
</body>
</html>